<template>
  <view class="glo-tabs">
    <scroll-view :scroll-x="scroll">
      <view class="list " :class="[scroll ? 'scroll' : 'no-scroll']" :style="[listStyle]">
        <view class="item" :class="{
          'active': activeItem === item.id
        }" :style="[activeItem === item.id ? itemActiveStyle : itemStyle]" v-for="item in list" :key="item.name"
          @click="changeItem(item)">
          <view class="num" v-if="item.num">{{ item.num }}</view>
          <text class="name" v-if="item.name">{{ item.name }}</text>
          <text class="statistics" v-if="item.statistics">({{ item.statistics.available }}/{{ item.statistics.total
          }})</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  scroll: {
    type: Boolean,
    default: false,
  },
  gap: {
    type: String,
    default: '100',
  },
  activeStyle: {
    type: Object,
    default: () => ({}),
  },
  internalStyle: {
    type: Object,
    default: () => ({}),
  },

});
const listStyle = computed(() => {
  return {
    gap: `${props.gap}rpx`,
  };
});
const itemStyle = computed(() => {
  return {
    fontSize: '23rpx',
    color: '#767676',
    ...props.internalStyle
  };
});
const itemActiveStyle = computed(() => {
  return {
    fontSize: '30rpx',
    color: '#3D3D3D',
    ...props.activeStyle
  };
});

const activeItem = ref(props.list[0].id);
const changeItem = (item) => {
  activeItem.value = item.id;
};


</script>

<style lang="scss" scoped>
.glo-tabs {

  .list {
    padding-bottom: 10rpx;

    &.no-scroll {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &.scroll {
      display: flex;
      align-items: center;
    }
  }

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex-shrink: 0;

    .num {
      z-index: 3;
      position: absolute;
      top: 0rpx;
      right: -15rpx;
      padding: 0 8rpx;
      height: 19rpx;
      background: #FF5050;
      box-shadow: 0rpx 0rpx 8rpx 4rpx rgba(0, 0, 0, 0.05);
      border-radius: 0 8rpx 0 20rpx;
      font-size: 12rpx;
      color: #fff;
    }

    .name,
    .statistics {
      position: relative;
      z-index: 2;
      line-height: 1;
    }

    &.active {
      &::after {
        content: " ";
        position: absolute;
        z-index: 1;
        bottom: -10rpx;
        left: 0;
        width: 100%;
        height: 15rpx;
        border-radius: 4rpx;
        background: linear-gradient(90deg, #76ffdd 0%, #0fd6fe 50%, #3a82ff 100%);
      }
    }
  }
}
</style>
